import React, { useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';
import HeadNav from '../../components/HeadNav';
import style from './index.module.scss';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import ListItem from '../../components/ListItem';
import List from '@mui/material/List';

export default function MyData () {
    const { q }  = useParams();
    const navigate = useNavigate();
    const [ value, setValue] = useState(q);
    const leftClick = () => {
      navigate(-1);
    }
    const handleChange = (e,newValue) => {
      setValue(newValue)
    }
    const userClick = (item) => {
      const { _id } = item;
      if (value === '已录取' || value === '已完成') {
        return naiagateDetail(_id,true,true)
      }
      return naiagateDetail(_id,true,false)
    }
    const naiagateDetail = (_id,isHide,isShowContact) => {
      navigate(`/work/workDetail`,{
        state: { 
          id: _id,
          isHide,
          isShowContact
        }
      });
    }
    const data = [
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      },
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      },
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      },
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      },
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      },
      {
        _id: 101,
        title: '周末招聘语音聊天(工作轻松，非常简单的啊啊啊啊)',
        detail: '致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里致斯科特、亚历克斯、詹妮弗——希望我能来，但我现在不在城里',
        tag: [
          {
            name: '有提成'
          },
          {
            name: '有提成'
          },
          {
            name: '有提成'
          }
        ],
        price: 1000,
        methods: '月',
        publicNickName: '湖南信息学院',
        publicInfo: 'https://cdn.uviewui.com/uview/album/1.jpg' 
      }
    ]

    return (
      <>
        <HeadNav leftClick={leftClick} title={'我的兼职'} isShadow={false} borderRadius={'0'} ></HeadNav>
          <div className={style.content}>
            <div className={style.head}> 
              <Tabs
              value={value}
              style={{padding: '0 4%'}}
              onChange={handleChange}
              scrollButtons={false}
              visibleScrollbar={true}
              variant={'fullWidth'}
            >
              <Tab label="全部" value="全部" />
              <Tab label="已报名" value="已报名" />
              <Tab label="已录取" value="已录取" />
              <Tab label="已完成" value="已完成" />
            </Tabs>
            </div>
            <div className={style.box}>
              <div className={style.list_content}>
              <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
                {data.map((item) => {
                  return (
                    <ListItem key={item._id + ''} userClick={userClick} {...item} text={value}></ListItem>
                  )
                })}
              </List>
              </div>
            </div>
          </div>
      </>
    )
}
